<template>
  <div class="container">
    <slot></slot>
    <div class="scroll-panel">
      <div class="scroll">
        <scroll-line v-for="item in data" :arr="item" :key="item.toString()"/>
      </div>
    </div>
  </div>
</template>

<script>
import ScrollLine from '@/components/base/ScrollLine'

export default {
  name: 'ScrollBox',
  components: { ScrollLine },
  props: {
    data: Array
  },
  data () {
    return {
      // data,
    }
  }
}
</script>

<style scoped>
.scroll-panel {
  height: 500px;
  overflow: hidden;
}

.scroll {
  animation-name: scroll;
  animation-duration: 1000s;
}

@keyframes scroll {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-61320px);
  }
}
</style>